<template>
  <div class="category">
    <pageSearch
      :search-form-config="searchFormConfig"
      @resetBtnClick="handleResetClick"
      @queryBtnClick="handleQueryClick"
    ></pageSearch>
    <div class="content">
      <pageContent
        ref="pageContentRef"
        :content-table-config="contentTableConfig"
        page-name="category"
      ></pageContent>
    </div>
  </div>
</template>

<script setup lang="ts">
import pageSearch from '@/components/page-search/src/page-search.vue'
import pageContent from '@/components/page-content/src/page-content.vue'
import { searchFormConfig } from './config/pageSearch.config'
import { contentTableConfig } from './config/pageConten.config'
import { ref } from 'vue'

// 获取pageContentRef组件的属性与方法
const pageContentRef = ref<InstanceType<typeof pageContent>>()
/**
 * handleResetClick 重置按钮的回调函数
 */
const handleResetClick = () => {
  pageContentRef.value?.getPageData()
}
/**
 * 搜索按钮的回调函数
 * @param queryInfo 携带的search搜索框的信息
 */
const handleQueryClick = (queryInfo: any) => {
  pageContentRef.value?.getPageData(queryInfo)
}
</script>

<style scoped>
.content {
  margin-top: 20px;
  padding: 20px;
  background-color: #ffffff;
}
</style>
